﻿<template>
	<view class="wrap">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<!-- <u-navbar leftIcon="search" title="购物车" safeAreaInsetTop fixed placeholder @leftClick="goSearch"> -->
		<u-navbar title="购物车" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<!-- 购物车主结构  -->
		<view v-if="shoppingCard.list && shoppingCard.list.length > 0">
			<u-checkbox-group placement="column" v-model="cartIds" @change="itemChange">
				<view class="cart-shoppingcard" v-for="(item, index) in shoppingCard.list" :key="index">
					<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center">
						<view class="cart-shopp-name">
							<text class="coreshop-font-15 coreshop-text-bold">{{item.products.name}}</text>
						</view>
						<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
							<u-button :plain="true" size="mini" @click="goGoodsDetail(item.products.goodsId)">浏览</u-button>
						</view>
					</view>
					<view style="height: 12.5px;"></view>
					<view class="cart-shoppingcard-goods">
						<view class="cart-shoppingcard-goods-checkbtn">
							<u-checkbox active-color="red" :name="item.id"></u-checkbox>
						</view>
						<image class="cart-shoppingcard-goods-image" :src="item.products.images" mode="widthFix"></image>
						<view class="cart-shoppingcard-goods-body">
							<view class="cart-shoppingcard-goods-title" v-if="item.products.spesDesc">{{ item.products.spesDesc }}
							</view>
							<view class="cart-shoppingcard-goods-title" v-if="item.products.promotionList">
								<text class="cart-badge cart-bg-gray" v-for="(v, k) in item.products.promotionList" :key="k"
									:class="v.type !== 2 ? 'bg-gray' : ''"> {{ v.name }}</text>
							</view>

							<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
								<view class="coreshop-flex coreshop-flex-direction-row coreshop-align-center">
									<text class="cart-shoppingcard-goods-price">￥{{item.products.price}}</text>
									<text class="coreshop-font-10 coreshop-margin-left-5"
										v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.products.points > 0">
										(送 {{item.products.points}}{{ pointShowName}})
									</text>
								</view>
								<view class="cart-shoppingcard-goods-number">
									<u-number-box buttonSize="24" integer :name="index" :value="item.nums" ref="index"
										@change="toNumberChange" :step="1" :min="1" :max="item.products.stock"></u-number-box>
								</view>
							</view>

							<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
								<text class="cart-shoppingcard-remove  coreshop-text-green" v-if="item.stockNo">库存不足</text>
								<text class="cart-shoppingcard-remove  coreshop-text-green" v-else-if="item.stockTension">库存紧张</text>
								<text class="cart-shoppingcard-remove " v-else=""></text>
							</view>

						</view>

					</view>

					<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
						<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-13"
							v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.products.pointsDeduction > 0">
							<view>
								{{ pointShowName}}兑换价：
							</view>
							<view class="coreshop-text-red">
								{{pointDiscountedProportion * item.products.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.products.price - item.products.pointsDeduction).toFixed(2)}}元
							</view>
						</view>
						<view v-else></view>
						<u-icon name="trash" size="14" @click="removeGoods" :index="index" label="删除" labelSize="12"></u-icon>
					</view>

				</view>
			</u-checkbox-group>

		</view>

		<!-- 购物车为空 -->
		<view v-else>
			<view class="coreshop-emptybox">
				<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/cart.png'" icon-size="150" text="您的购物车空空如也"
					mode="list"></u-empty>
				<navigator class="coreshop-btn" url="/pages/category/index/index" open-type="switchTab">随便逛逛</navigator>
			</view>
		</view>

		<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center cart-footer"
			v-if="shoppingCard.list && shoppingCard.list.length >= 1">
			<view
				class="cart-shoppingcard-checkbtn coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center">
				<u-checkbox-group v-model="selectAll" @change="itemChangeAll">
					<u-checkbox name="全选" label="全选" active-color="red"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view
				class="cart-shoppingcard-count coreshop-flex coreshop-flex-direction-column coreshop-justify-between coreshop-align-left coreshop-margin-right-5"
				v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && pointShowMoney>0">
				<view>
					<text class="cart-text">合计 :</text>
					<text class="coreshop-font-18 coreshop-text-red">￥{{totalprice}}</text>
				</view>
				<view>
					<text class="coreshop-font-12">{{ pointShowName}}兑换价：</text>
					<text class="coreshop-font-12 coreshop-text-red">{{pointShowText}}</text>
				</view>
			</view>
			<view
				class="cart-shoppingcard-count coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center coreshop-margin-right-5"
				v-else>
				<text class="cart-text">合计 :</text>
				<text class="coreshop-font-18 coreshop-text-red">￥{{totalprice}}</text>
			</view>
			<view class="cart-shoppingcard-checkout coreshop-bg-red" @tap="checkout">立即结算</view>
		</view>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				// 总价
				totalprice: '0.00',
				// 选择文本
				// 购物车数据 可以来自 api 请求或本地数据
				shoppingCard: {},
				cartIds: [], //选中ids
				goSettlement: false, //去结算按钮
				selectAll: ['全选'],
				pointShowText: "",
				pointShowMoney: 0,
			}
		},
		//页面加载
		onShow() {
			let userToken = this.$db.get('userToken');
			if (userToken) {
				this.cartIds = [];
				this.getCartData(); //获取购物车数据
				// 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数 
				//this.countTotoal();
			}
		},
		computed: {
			// 从vuex中获取店铺名称
			shopName() {
				return this.$store.state.config.shopName;
			},
			GoodsStocksWarn() {
				return this.$store.state.config.goodsStocksWarn;
			},
			pointSwitch() {
				return this.$store.state.config.pointSwitch
			},
			pointShowExchangePrice() {
				return this.$store.state.config.pointShowExchangePrice
			},
			pointDiscountedProportion() {
				return this.$store.state.config.pointDiscountedProportion
			},
			pointExchangeModel() {
				return this.$store.state.config.pointExchangeModel
			},
			pointShowName() {
				return this.$store.state.config.pointShowName
			},
			pointGetModel() {
				return this.$store.state.config.pointGetModel
			},
			pointShowPoint() {
				return this.$store.state.config.pointShowPoint
			},
		},
		methods: {
			//数组转字符串
			arrayToStr: function(array) {
				return array.toString();
			},
			//获取购物车数据
			getCartData: function() {
				let _this = this;
				let cartIds = _this.arrayToStr(_this.cartIds);
				let data = {
					ids: cartIds,
					display: 'all'
				};
				this.$u.api.cartList(data).then(res => {
					if (res.status) {
						_this.shoppingCard = res.data;
						_this.showHandle(_this.shoppingCard); //数量设置
						//console.log(_this.shoppingCard);
					}
				});
			},
			//渲染前配置数据
			showHandle: function(data, flag = true) {
				let _this = this;
				let goSettlement = false;
				for (let i in data.list) {
					//不可能购买0件
					if (data.list[i].nums < 1) {
						data.list[i].nums = 1;
					}
					//不能买大于库存的数量(库存不足)
					let stockNo = false;
					let maxStock = data.list[i].products.stock;
					if (data.list[i].nums > data.list[i].products.stock) {
						stockNo = true;
						maxStock = data.list[i].nums;
					}
					data.list[i].maxStock = maxStock;
					data.list[i].stockNo = stockNo;

					//库存紧张
					let stockTension = false;
					if (_this.GoodsStocksWarn >= data.list[i].products.stock) {
						stockTension = true;
					}
					data.list[i].stockTension = stockTension;

					//设置样式
					data.list[i].minStatus = 'normal';
					data.list[i].maxStatus = 'normal';
					if (data.list[i].nums == 1) {
						data.list[i].minStatus = 'disabled';
					}
					if (data.list[i].nums == data.list[i].products.stock) {
						data.list[i].maxStatus = 'disabled';
					}

					//设置规格参数
					data.list[i].spes = [];
					if (data.list[i].products.spesDesc != null) {
						let spesArray = data.list[i].products.spesDesc.split(',');
						for (let key in spesArray) {
							let spesOne = spesArray[key].split(':');
							data.list[i].spes.push(spesOne[1]);
						}
					}
					//添加左滑效果
					data.list[i].isTouchMove = false;
					//是否可以去支付
					if (data.list[i].isSelect) {
						goSettlement = true;
					}
					//id转换为字符串
					data.list[i].id = _this.arrayToStr(data.list[i].id);
					//选中状态
					if (flag) {
						data.list[i].isSelect = true;
						if (data.list[i].isSelect) {
							if (_this.cartIds.indexOf(data.list[i].id) < 0) {
								_this.cartIds.push(data.list[i].id);
							}
						}
					}
				}
				data.goodsPromotionMoney = _this.$common.formatMoney(data.goodsPromotionMoney, 2, '');
				data.orderPromotionMoney = _this.$common.formatMoney(data.orderPromotionMoney, 2, '');
				data.amount = _this.$common.formatMoney(data.amount, 2, '');
				let isLoad = false;
				if (data.list.length < 1) {
					isLoad = true;
				}
				let n = 0;
				for (let i in data.promotionList) {
					n++;
				}

				_this.goSettlement = goSettlement;
				_this.isLoad = isLoad;
				_this.cartNums = n;

				if (flag) {
					_this.shoppingCard = data;
				} else {
					_this.getCartData();
				}
				_this.countTotoal();
			},
			//计算总计函数
			countTotoal: function() {
				let _that = this;
				var total = 0;
				var pointsMoneySum = 0;
				var pointsSum = 0;

				for (let i in _that.shoppingCard.list) {
					if (_that.shoppingCard.list[i].isSelect) {
						total += Number(_that.shoppingCard.list[i].products.price) * Number(_that.shoppingCard.list[i].nums);
						_that.pointShowMoney += Number(_that.shoppingCard.list[i].products.pointsDeduction) * Number(_that
							.shoppingCard.list[i].nums);
						pointsSum += _that.pointDiscountedProportion * Number(_that.shoppingCard.list[i].products
							.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
						pointsMoneySum += Number(_that.shoppingCard.list[i].products.price - _that.shoppingCard.list[i].products
							.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
					}
				}
				_that.pointShowText = pointsSum + _that.pointShowName + '+' + _that.$common.formatMoney(pointsMoneySum, 2, '');
				_that.totalprice = _that.$common.formatMoney(total, 2, '');
			},
			toNumberChange: function(e) {
				this.$u.throttle(this.numberChange(e), 500)
			},
			numberChange(e) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let _this = this;
				let data = {
					id: this.shoppingCard.list[e.name].productId,
					nums: e.value
				};
				_this.$u.api.setCartNum(data).then(res => {
					if (res.status) {
						_this.shoppingCard.list[e.name].nums = e.value;
						//重新计算总价
						this.countTotoal();
						setTimeout(function() {
							uni.hideLoading();
						}, 300);
					} else {
						_this.$u.toast(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 300);
					}
				});

			},
			removeGoods: function(index) {
				let _this = this;
				var index = index;
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除此商品吗？',
					success: (e) => {
						if (e.confirm) {
							//移除数据库
							let data = {
								id: _this.shoppingCard.list[index].id
							};
							_this.$u.api.removeCart(data).then(res => {
								if (res.status) {
									//清除已经勾选的商品和购物车数据
									var idIndex = _this.cartIds.indexOf(_this.shoppingCard.list[index].id);
									if (idIndex > -1) {
										_this.cartIds.splice(index, 1);
									}
									_this.shoppingCard.list.splice(index, 1);
									//计算总价
									_this.countTotoal();
									_this.$refs.uToast.show({
										message: res.msg,
										type: 'success',
										back: false
									});
								}
							});

						}
					}
				})
			},
			checkout: function() {
				let _this = this;
				let cartData = _this.shoppingCard.list;
				let newData = '';
				for (let key in cartData) {
					if (cartData[key].isSelect == true) {
						newData += ',' + cartData[key].id;
						_this.goSettlement = true;
					}
				}
				if (newData.substr(0, 1) == ',') {
					newData = newData.substr(1);
				}
				if (newData.length > 0) {
					_this.$u.route('/pages/placeOrder/index/index?orderType=1&cartIds=' + JSON.stringify(newData));
					return true;
				} else {
					//没有选择不跳转
					_this.$refs.uToast.show({
						message: "请选择要下单的商品",
						type: 'error',
						back: false
					});
				}

			},
			// 商品选中
			itemChange: function(e) {
				var _this = this;
				_this.cartIds = e;
				var list = _this.shoppingCard.list;
				for (var i = 0; i < list.length; i++) {
					var bl = _this.cartIds.indexOf(list[i].id) != -1;
					if (bl) {
						list[i].isSelect = true;
					} else {
						list[i].isSelect = false;
					}
				}
				_this.shoppingCard.list = list;
				if (_this.cartIds.length == _this.shoppingCard.list.length) {
					this.selectAll = ['全选'];
				} else {
					this.selectAll = [];
				}
				this.countTotoal();
			},
			itemChangeAll: function(e) {
				let _this = this;
				if (e.length > 0) {
					var ids = [];
					for (var i = 0; i < _this.shoppingCard.list.length; i++) {
						_this.shoppingCard.list[i].isSelect = true;
						ids.push(_this.shoppingCard.list[i].id);
					}
					_this.cartIds = ids;
				} else {
					for (var i = 0; i < _this.shoppingCard.list.length; i++) {
						_this.shoppingCard.list[i].isSelect = false;
					}
					_this.cartIds = [];
				}
				this.countTotoal();
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "cart.scss";
</style>